<template>
    <Dialog :app-dialog="appDialog">
        <div class="sop_config">
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRule"
                prop="trigger_type"
                class="form_sop"
                label-width="auto">
                <el-form-item class="mar0_form_item header_tach" label="触达方式">
                    <el-radio-group v-model="formData.trigger_type">
                        <el-radio
                            v-for="item in touch_type"
                            :key="item.id"
                            :label="item.id"
                            :disabled="item.id == 1 && isShow">
                            <el-popover
                                v-if="item.id == 1 && isShow"
                                trigger="hover"
                                placement="top"
                                :width="'auto'"
                                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                                <template #reference>
                                    <span>{{ item.name }}</span>
                                </template>
                                <template #default>
                                    <p>
                                        你还没有授权企业微信，无法使用！<span class="go_auto" @click="onAuth"
                                            >去授权</span
                                        >
                                    </p>
                                </template>
                            </el-popover>
                            <span v-else>{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="text_box">
                    <h3>注意：</h3>
                    <p>
                        1、使用该功能，请先确保授权企业微信！<span
                            v-if="isSuper == 1 && isShow"
                            class="box_tips"
                            @click="onAuth"
                            >去授权</span
                        >
                    </p>
                    <p v-if="props.from == '1'">2、该客户必须添加企业微信员工才可触达。</p>
                    <p v-if="props.from == '1' && +formData.trigger_type === 1">
                        3、通过企微客户群发接口触达，将占用每日客户限制的额度。（企微限制客户每日只能只能收到同一个员工一条群发消息。）
                    </p>
                    <p v-if="!props.from && +formData.trigger_type === 1">
                        2、通过企微客户群发接口触达，将占用每日客户限制的额度。
                    </p>
                    <p v-if="props.from !== '1' && +formData.trigger_type === 2">
                        2、当触发规则后，群主收到应用通知后，点击查看详情后<span class="box_tips">手动发送消息</span>。
                    </p>
                    <p v-show="props.from == '1' && +formData.trigger_type === 1">
                        <span>{{ props.from == '1' && +formData.trigger_type === 1 ? '4、' : '3、' }}</span
                        >若使用更加高效的员工消息触达，请联系我们的<span class="box_tips" @click="relation"
                            >客服！</span
                        >
                    </p>
                    <p v-show="props.from === '1' && +formData.trigger_type === 2">
                        <span>3、</span>当客户触发规则时，员工收到应用提醒后，点击进入任务详情页面<span class="box_tips"
                            >手动发送消息</span
                        >。
                    </p>
                </div>
                <el-form-item class="mar0_form_item" label="时间规则">
                    <el-radio-group v-model="formData.trigger_time_type" @change="changeTriggerType">
                        <el-radio label="1">定时推送</el-radio>
                        <el-radio v-if="props.birth != 4 && props.birth != 5" label="2">周期推送</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="notShow_formItem_required" label=" " prop="execute_time_local">
                    <div v-if="formData.trigger_time_type == '1'" class="time_rule_radio">
                        <el-radio-group v-model="formData.execute_time_local">
                            <el-radio class="radio_item" label="1">{{
                                props.from == '1'
                                    ? `${props.scene()}${[4, 5].includes(props.birth) ? '后，' : '时，'}`
                                    : '规则生效后，'
                            }}</el-radio>
                            {{
                                props.from == '1'
                                    ? `${props.scene()}${[4, 5].includes(props.birth) ? '后，' : '时，'}`
                                    : '规则生效后，'
                            }}
                            <el-input
                                v-model="formData.execute_time"
                                class="cust_message_min"
                                min="0"
                                max="60"
                                type="number">
                                <template #append>
                                    <el-select
                                        v-model="formData.execute_time_type"
                                        class="cust_message"
                                        placeholder="请选择时间段">
                                        <el-option value="day" label="天">天</el-option>
                                        <el-option
                                            v-if="!(props.from == '1' && [4, 5].includes(props.birth))"
                                            value="hour"
                                            label="小时"
                                            >小时</el-option
                                        >
                                        <el-option
                                            v-if="!(props.from == '1' && [4, 5].includes(props.birth))"
                                            value="minute"
                                            label="分钟"
                                            >分钟</el-option
                                        >
                                    </el-select>
                                </template>
                            </el-input>
                            {{ formData.execute_time_type == 'day' ? '的' : '后执行' }}
                            <el-time-select
                                v-if="formData.execute_time_type == 'day'"
                                v-model="formData.execute_time_hour1"
                                class="time_pick execute_select"
                                :clearable="false"
                                start="00:00"
                                end="23:50"
                                step="00:10"
                                placeholder="选择时间" />
                            {{ formData.execute_time_type == 'day' ? '执行' : '' }}
                            <el-radio v-if="props.birth == '4'" class="radio_item" label="2">
                                {{ props.from == '1' ? props.scene() + '前，' : '' }}
                                <el-input
                                    v-model="formData.execute_time2"
                                    class="cust_message_min"
                                    min="0"
                                    max="60"
                                    type="number">
                                    <template #append>
                                        <el-select
                                            v-model="formData.execute_time_type2"
                                            class="cust_message_time"
                                            placeholder="请选择时间段">
                                            <el-option value="day" label="天">天</el-option>
                                            <el-option
                                                v-if="!(props.from == '1' && [4, 5].includes(props.birth))"
                                                value="hour"
                                                label="小时"
                                                >小时</el-option
                                            >
                                            <el-option
                                                v-if="!(props.from == '1' && [4, 5].includes(props.birth))"
                                                value="minute"
                                                label="分钟"
                                                >分钟</el-option
                                            >
                                        </el-select>
                                    </template>
                                </el-input>
                                的
                                <el-time-select
                                    v-if="formData.execute_time_type2 == 'day'"
                                    v-model="formData.execute_time_hour"
                                    class="time_pick"
                                    start="00:00"
                                    end="23:50"
                                    step="00:10"
                                    placeholder="选择时间" />
                                执行
                            </el-radio>
                            <el-radio v-if="props.birth == '5'" class="radio_item" label="2">
                                {{ props.from == '1' ? props.scene() + '前，' : '' }}
                                <el-input
                                    v-model="formData.execute_time2"
                                    class="cust_message_min"
                                    min="0"
                                    max="60"
                                    type="number">
                                    <template #append>
                                        <el-select
                                            v-model="formData.execute_time_type2"
                                            class="cust_message_time selectTimes"
                                            placeholder="请选择时间段">
                                            <el-option value="day" label="天">天</el-option>
                                            <el-option
                                                v-if="!(props.from == '1' && [4, 5].includes(props.birth))"
                                                value="hour"
                                                label="小时"
                                                >小时</el-option
                                            >
                                            <el-option
                                                v-if="!(props.from == '1' && [4, 5].includes(props.birth))"
                                                value="minute"
                                                label="分钟"
                                                >分钟</el-option
                                            >
                                        </el-select>
                                    </template>
                                </el-input>
                                的
                                <el-time-select
                                    v-if="formData.execute_time_type2 == 'day'"
                                    v-model="formData.execute_time_hour"
                                    class="time_pick"
                                    start="00:00"
                                    end="23:50"
                                    step="00:10"
                                    placeholder="选择时间" />
                                执行
                            </el-radio>
                        </el-radio-group>
                    </div>

                    <div v-if="formData.trigger_time_type == '2'" class="time_rule_radio">
                        <el-radio-group v-model="formData.trigger_time_mode">
                            <div>
                                <div style="display: flex; align-items: center">
                                    <el-radio class="radio_item" label="1">{{
                                        props.from == '1' ? props.scene() + '每' : '规则生效后，每'
                                    }}</el-radio>
                                    {{ props.from == '1' ? props.scene() + '每' : '规则生效后，每' }}
                                    <el-input
                                        v-model="formData.execute_time"
                                        :disabled="formData.trigger_time_mode != '1'"
                                        class="cust_message_min"
                                        min="1"
                                        type="number"
                                        @change="changeNum">
                                        <template #append>
                                            <el-select
                                                v-model="formData.execute_time_type"
                                                class="cust_message"
                                                placeholder="请选择客户阶段">
                                                <el-option value="day" label="天">天</el-option>
                                                <el-option value="hour" label="小时">小时</el-option>
                                                <el-option value="minute" label="分钟">分钟</el-option>
                                            </el-select>
                                        </template>
                                    </el-input>
                                    {{ formData.execute_time_type == 'day' ? '的' : '' }}
                                    <el-time-select
                                        v-if="formData.execute_time_type == 'day'"
                                        v-model="formData.execute_time_hour"
                                        :disabled="formData.trigger_time_mode != '1'"
                                        class="time_pick"
                                        :clearable="false"
                                        start="00:00"
                                        end="23:50"
                                        step="00:10"
                                        placeholder="选择时间" />
                                    {{ props.from == '1' ? '执行一次' : ' 后执行' }}
                                </div>

                                <div v-if="!props.from" style="display: flex; align-items: center">
                                    <el-radio v-if="!props.from" class="radio_item" label="2">{{
                                        props.from == '1' ? props.scene() + '时，每' : '规则生效后，每'
                                    }}</el-radio>
                                    {{ props.from == '1' ? props.scene() + '时，每' : '规则生效后，' }}每
                                    <el-select
                                        v-model="formData.execute_time_type1"
                                        class="cust_message_time"
                                        :disabled="formData.trigger_time_mode != '2'"
                                        @change="changeTypes">
                                        <el-option value="day" label="日">日</el-option>
                                        <el-option value="week" label="周">周</el-option>
                                        <el-option value="month" label="月">月</el-option>
                                    </el-select>
                                    <el-select
                                        v-if="formData.execute_time_type1 == 'week'"
                                        v-model="formData.execute_time1"
                                        :disabled="formData.trigger_time_mode != '2'"
                                        class="cust_message_time execute_select">
                                        <el-option
                                            v-for="item in weekData"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.id" />
                                    </el-select>
                                    <el-select
                                        v-if="formData.execute_time_type1 == 'month'"
                                        v-model="formData.execute_time1"
                                        :disabled="formData.trigger_time_mode != '2'"
                                        class="cust_message_time execute_select">
                                        <el-option
                                            v-for="item in dateData"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.id" />
                                    </el-select>
                                    <el-time-select
                                        v-model="formData.execute_time_hour1"
                                        class="time_pick execute_select"
                                        :disabled="formData.trigger_time_mode != '2'"
                                        :clearable="false"
                                        start="00:00"
                                        end="23:50"
                                        step="00:10"
                                        placeholder="选择时间" />
                                    {{ props.from == '1' ? ' 执行' : ' 后执行' }}
                                    <el-tooltip
                                        v-if="formData.execute_time_type1 == 'month'"
                                        effect="light"
                                        placement="top">
                                        <template #content>
                                            <div style="width: 300px">{{ proTips }}</div>
                                        </template>
                                        <el-image
                                            src="/static/question.png"
                                            style="width: 16px; height: 16px"></el-image>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="内容标题" prop="title">
                    <el-input v-model="formData.title" maxlength="15" placeholder="请输入内容标题" show-word-limit />
                </el-form-item>
                <div class="content_detail">
                    <el-form-item label="推送内容" prop="welcome_info.welcome_text">
                        <div class="content_left">
                            <div class="list_item mt20">
                                <MaterialContent
                                    ref="materialContentRef"
                                    :max-num="9"
                                    :input-content-tabs="inputContentTabs"
                                    :show-material-tabs="showMaterialTabs"
                                    :input-content-data="formData.welcome_info.welcome_text"
                                    :material-content-data="materialContentData"
                                    :re-key="reKey"
                                    :placeholder="'请输入推送内容'"
                                    @change="changeMaterial"
                                    @changPro="changePro" />
                            </div>
                        </div>
                        <!-- <div class="item_con item_message_box pad12">
              <el-input class="item_con_input input_textarea" type="textarea" :rows="4" v-model="formData.content" id="welcomeContent" placeholder="请输入推送内容" maxlength="1000" show-word-limit @input="changeWords" />
              <div class="simple_fn">
                <div class="sele_text" @click="onOpenUpload('1', true)">选择文本</div>
                <div class="emoj" @click="emojiVisible = !emojiVisible">😊</div>
                <div class="sele_text" @click="onInsertText('##员工别名##')">插入员工别名</div>
                <div class="sele_text" @click="onInsertText('##员工姓名##')">插入员工姓名</div>
              </div>
              <el-scrollbar class="upload_list_box">
                <ul class="upload_list">
                  <li class="upload_item" v-for="item in newArr" :key="item.id">
                    <img class="file_icon" :src="item.cur_icon" alt="" />
                    <div class="file_name">{{ item.name }}</div>
                    <img class="del_icon" @click="remove(item)" src="@/assets/image/channel/remove_icon.png" />
                  </li>
                </ul>
              </el-scrollbar>
              <el-popover popper-class="pop_select_box" placement="top-start" trigger="hover" :width="430">
                <template v-if="Number(9 - newArr.length) > 0" #reference>
                  <div class="upload_btn">
                    <el-icon><plus /></el-icon>
                    <span class="upload_text">图片/音频/视频/文件/链接/抽奖/收集表/电商/公众号/小程序</span>
                  </div>
                </template>
                <template #default>
                  <div class="upload_pop">
                    <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="onOpenUpload(item.id)">
                      <img class="item_pop_icon" :src="item.icon" alt="" />
                      <span class="item_pop_name">{{ item.name }}</span>
                    </div>
                  </div>
                </template>
              </el-popover>
              <div class="emoj_box">
                <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
              </div>
            </div> -->
                    </el-form-item>
                    <div class="content-right">
                        <PhonePreview ref="phonePreviewRef" :re-key="reKey" />
                    </div>
                </div>
            </el-form>
            <!-- <div class="prev_box">
        <div class="phone_con">
          <el-scrollbar class="phone_List">
            <Friend :FriendDetail="formData.fileList" />
          </el-scrollbar>
        </div>
      </div> -->
        </div>
        <el-dialog v-model="centerDialogVisible" class="qr_dialog" width="30%" center>
            <div class="qr_code_box">
                <el-image
                    fit="cover"
                    class="qr_img"
                    src="https://static.scrm.keyid.cn/assets/images/global/service.png">
                    <template #error>
                        <div class="image-slot">
                            <el-icon><icon-picture /></el-icon>
                        </div>
                    </template>
                </el-image>
                <p class="service">扫码添加客服</p>
            </div>
        </el-dialog>
        <!-- 素材标签 -->
        <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
    </Dialog>
</template>
<script setup lang="ts">
import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
import Dialog from '@/components/Dialog.vue';
import { useStore } from '@/store';
// import Friend from './Friend.vue'
// import { Plus } from '@element-plus/icons-vue'
// import ZWEmoji from '@/components/ZWEmoji.vue'
// import ZWMatericalLib from '@/components/channelNew/ZWMatericalLib.vue'
import ZWMatericalLib from '@/components/channelNewOriginal/ZWMatericalLib.vue';
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElInput, ElForm, ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import {
    getSetionId,
    getSuffixIcon,
    IsNotEmpty,
    useInsertWelcomeContent,
    getVideoImage,
    initMaterialData
} from '@/utils/utils';
import { getInstallUrl } from '@/api/channel/authconfig';

import { getChannelConfigInfo } from '@/api/channel/authconfig.ts';
const props = defineProps(['birth', 'configStr', 'type', 'scene', 'from', 'ruleIndex']);
const emits = defineEmits(['submit', 'getFileList']);
const formRef = ref<FormInstance>();
const router = useRouter();
const store = useStore();
const reKey = ref();
const materialContentRef = ref<HTMLElement | null>();
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentTabs = ref<Array<number>>([1, 2, 3, 5]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9', '11', '10']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]);
const ZWMatericalLibRef = ref<any>(null);
const emoji = ref(null);
const emojiVisible = ref(false);
const isShow = ref(false);
const centerDialogVisible = ref(false);
const proTips = ref(
    '当选择"月"周期执行时，若当月不存在选择的日期，则按照当月最后一天执行。例如：2月选择31号时，则按照2月最后一天28/29号时执行'
);
const weekData = ref([
    {
        id: '1',
        label: '周一'
    },
    {
        id: '2',
        label: '周二'
    },
    {
        id: '3',
        label: '周三'
    },
    {
        id: '4',
        label: '周四'
    },
    {
        id: '5',
        label: '周五'
    },
    {
        id: '6',
        label: '周六'
    },
    {
        id: '7',
        label: '周日'
    }
]);
const dateData = ref([
    {
        id: '1',
        label: '1号'
    },
    {
        id: '2',
        label: '2号'
    },
    {
        id: '3',
        label: '3号'
    },
    {
        id: '4',
        label: '4号'
    },
    {
        id: '5',
        label: '5号'
    },
    {
        id: '6',
        label: '6号'
    },
    {
        id: '7',
        label: '7号'
    },
    {
        id: '8',
        label: '8号'
    },
    {
        id: '9',
        label: '9号'
    },
    {
        id: '10',
        label: '10号'
    },
    {
        id: '11',
        label: '11号'
    },
    {
        id: '12',
        label: '12号'
    },
    {
        id: '13',
        label: '13号'
    },
    {
        id: '14',
        label: '14号'
    },
    {
        id: '15',
        label: '15号'
    },
    {
        id: '16',
        label: '16号'
    },
    {
        id: '17',
        label: '17号'
    },
    {
        id: '18',
        label: '18号'
    },
    {
        id: '19',
        label: '19号'
    },
    {
        id: '20',
        label: '20号'
    },
    {
        id: '21',
        label: '21号'
    },
    {
        id: '22',
        label: '22号'
    },
    {
        id: '23',
        label: '23号'
    },
    {
        id: '24',
        label: '24号'
    },
    {
        id: '25',
        label: '25号'
    },
    {
        id: '26',
        label: '26号'
    },
    {
        id: '27',
        label: '27号'
    },
    {
        id: '28',
        label: '28号'
    },
    {
        id: '29',
        label: '29号'
    },
    {
        id: '30',
        label: '30号'
    },
    {
        id: '31',
        label: '31号'
    }
]);
const formData = ref({
    execute_time_type1: 'day',
    execute_time1: '1',
    trigger_type: '', //1 员工任务 2 企业微信纯提醒 3 公众号消息 4 短信
    execute_time_hour1: '08:00',
    trigger_time_mode: '1', //执行方式 1-循环周期 2-固定周期  / 周期执行的时候必填
    // trigger_type: '1', //1 员工任务 2 企业微信纯提醒 3 公众号消息 4 短信
    trigger_time_type: '1', //1 定时推送 2 周期推送
    execute_time: '8', //执行周期
    execute_time2: '8', //执行周期
    execute_time_type: 'day', //时间类型minute 分钟 hour 小时 day 天 week 周 month 月
    execute_time_type2: 'day', //ww
    execute_time_hour: '08:00', //具体的时间点数例如08:00
    execute_time_local: '1', //1 触发规则后执行 2 触发规则前执行
    title: '', //标题
    content: '',
    media_content: [], //选则素材库
    local_link: [], //本地地址
    local_content: [], //本地媒体内容
    activity: [], //活动
    fileList: [],
    welcome_info: {
        welcome_text: ''
    }
});
const changeMaterial = (val: any) => {
    formData.value.welcome_info = val.welcome_info;
};
const changePro = (val: any) => {
    formData.value.fileList = val.material;
};
const changeTypes = () => {
    if (formData.value.execute_time_type1 == 'week') {
        formData.value.execute_time1 = '1';
    }
};
const relation = () => {
    centerDialogVisible.value = true;
};
const onInsertText = useInsertWelcomeContent('welcomeContent', formData.value, 'content');
const newArr = computed(() => {
    // return formData.value.fileList.filter((item: any) => item.type != 1)
    return formData.value.fileList.filter((item: any) => item.type != 0);
});
const toOfficialAccounts = () => {
    router.push('/channelconfig/officeAccount/oaManage');
};
const formRule = reactive<FormRules>({
    title: { required: true, message: '内容标题不能为空', trigger: 'blur' },
    'welcome_info.welcome_text': { required: true, message: '推送内容不能为空', trigger: ['blur', 'change'] },
    execute_time_local: { required: true, message: '时间规则推送不能为空', trigger: 'blur' }
});
const touch_type = reactive([
    { id: '1', name: props.from == '1' ? '员工群发消息' : '群主群发消息' },
    { id: '2', name: props.from == '1' ? '员工私信任务' : '群主消息任务' }
    // 别删后期优化放开
    // { id: '2', name: '短信' },
    // { id: '3', name: '应用通知' },
    // { id: '4', name: '公众号模版消息' },
    // { id: '5', name: '抖音企业消息' },
    // { id: '6', name: '小程序消息' }
    // {id:2,name:'企业微信纯提醒'},
    // {id:3,name:'公众号消息'},
    // {id:4,name:'短信'},
]);
const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' },
    { id: '8', icon: '/static/file/wbgg.png', name: '抽奖' },
    { id: '27', icon: '/static/file/form.png', name: '收集表' },
    { id: '99', icon: '/static/file/shop.png', name: '电商' },
    { id: '15', icon: '/static/file/official.png', name: '公众号' },
    { id: '11', icon: '/static/file/miniApp.png', name: '小程序' }
]);
// 获取是否是超级管理员
const isSuper = computed(() => {
    return store.getters['user/getAccountInfo']?.base_info?.account_type;
    // const {
    //   user: {
    //     accountInfo: { base_info }
    //   }
    // } = JSON.parse(localStorage.getItem('zw-scrm-state'))
    // return base_info.account_type
});
// 是否授权企业微信
const isAuth = () => {
    getChannelConfigInfo().then((res: any) => {
        isShow.value = !res.suite_auth;
        if (!res.suite_auth) {
            formData.value.trigger_type = '';
        }
    });
};
isAuth();
const onAuth = () => {
    const currentCorp = store.getters['user/getCurrentCorp'] || '';
    getInstallUrl({ new_corp_id: currentCorp, callback_front_url: location.href }).then((res: any) => {
        window.open(res.link);
    });
};
// 取消
const cancelHandel = () => {
    appDialog.visible = false;
    formData.value.title = '';
    formData.value.content = '';
    formRef.value?.resetFields();
};
const changeTriggerType = (e: any) => {
    formData.value.execute_time_local = e;
    if (formData.value.trigger_time_type == '2' && formData.value.execute_time == '0')
        formData.value.execute_time = '1';
};
const changeNum = (value: any) => {
    const { trigger_time_type } = formData.value;
    if (trigger_time_type == '2' && +value == 0) {
        formData.value.execute_time = '1';
    }
};
// 保存
const submitHandel = async () => {
    await formRef.value?.validate((valid: boolean) => {
        const { execute_time_type2, execute_time_type, execute_time_local, execute_time_hour1, execute_time_hour } =
            formData.value;
        if (!valid) return;
        if (formData.value.trigger_time_type == '1') {
            formData.value.execute_time =
                [5, 4].includes(props.birth) && execute_time_local == '2'
                    ? formData.value.execute_time2
                    : formData.value.execute_time;
            formData.value.execute_time_type = execute_time_local == '2' ? execute_time_type2 : execute_time_type;
            formData.value.execute_time_hour = execute_time_local == '2' ? execute_time_hour : execute_time_hour1;
        }
        if (formData.value.trigger_time_type == '2' && formData.value.trigger_time_mode == '2') {
            formData.value.execute_time = formData.value.execute_time1;
            formData.value.execute_time_type = formData.value.execute_time_type1;
            formData.value.execute_time_hour = formData.value.execute_time_hour1;
        }
        const params = JSON.parse(JSON.stringify(formData.value));

        emits('submit', params);
        // emits('getFileList', formData.value.fileList)
        emits('getFileList', { fileList: formData.value.fileList, ruleIndex: props.ruleIndex });
        cancelHandel();
    });
};
//表情包管理
const chooseEmoji = (emoji: any) => {
    //事件。数据包含文本区域的值
    onInsertText(emoji);
    formData.value.content = formData.value.content.substr(0, 1000);
    emojiVisible.value = false;
    formData.value.fileList[0] = {
        // type: 1,
        type: 0,
        content: formData.value.content
    };
};
// 打开素材上传框
const onOpenUpload = (num: string, flag = false) => {
    if (flag) {
        const showTabs = ['1'];
        ZWMatericalLibRef.value.showTabs = showTabs;
        ZWMatericalLibRef.value.baseId = num;
        ZWMatericalLibRef.value.materVisible = true;
    } else {
        const showTabs = ['2', '4', '3', '5', '6', '8', '27', '99', '15', '11'];
        ZWMatericalLibRef.value.showTabs = showTabs;
        ZWMatericalLibRef.value.localUploadisShow = ['2', '3', '4', '5', '6'];
        ZWMatericalLibRef.value.baseId = num; //打开对应的基础素材
        if (num == '15') {
            ZWMatericalLibRef.value.multiple = false;
        }
        ZWMatericalLibRef.value.existFile = Number(9 - newArr.value.length); //打开对应的基础素材
        ZWMatericalLibRef.value.materVisible = true;
    }
};
// 插入名字
const insetName = () => {
    onInsertText('##客户姓名##');
    formData.value.content = formData.value.content.substr(0, 1000);
    formData.value.fileList[0] = {
        // type: 1,
        type: 0,
        content: formData.value.content
    };
};
//更改欢迎语
const changeWords = () => {
    formData.value.fileList[0] = {
        // type: 1,
        type: 0,
        content: formData.value.content
    };
};
// 获取选择的信息
const getMaterlib = (res: any, local = false) => {
    if (local) {
        if (res.data.length > 0) {
            onLocalType(res, local);

            res.data.forEach((item: any) => {
                item.type = res.type;
                item.user_name = '张三';
            });
        }
    } else if (res instanceof Array) {
        if (res[0].type == 0) {
            onLocalType(res[0], local);
        } else {
            if (res.length > 0) {
                res.forEach(ite => {
                    onLocalType(ite, local);
                });
            }
        }
    }
};

const onLocalType = (res: any, local = false) => {
    // 文本
    // if (res.type == 1) {
    if (res.type == 0) {
        let str = '';
        res.data.forEach((item: any) => {
            str += item.content;
        });
        onInsertText(str);
        formData.value.content = formData.value.content.substr(0, 1000);
        formData.value.fileList[0] = {
            // type: 1,
            type: 0,
            content: formData.value.content
        };
    } else {
        const result = [];
        if (res.data.length > 0) {
            res.data.forEach((item: any) => {
                item.type = res.type;
                item.user_name = '张三';
                result.push(item);
            });
        }
        if (local) {
            formData.value.fileList = formData.value.fileList.concat(changeLocalType(result));
        } else {
            formData.value.fileList = formData.value.fileList.concat(changeType(result));
        }
    }
};
// 转换本地上传的数据
const changeLocalType = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            // 图片
            if (item.type == 1) {
                item.cur_icon = '/static/file/pic.png';
                item.absolute_url = item.url;
                item.type = 1;
            }
            ///视频
            if (item.type == 2) {
                item.cur_icon = '/static/file/mov.png';
                item.type = 2;
                item.thumbnail_url = getVideoImage(item.url, 80, 55);
            }
            // 音频
            if (item.type == 4) {
                item.cur_icon = '/static/file/mp3.png';
                item.type = 4;
                item.title = item.name;
            }
            // 链接
            if (item.type == 3) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title;
                item.type = 3;
            }
            // 文件
            if (item.type == 5) {
                item.cur_icon = getSuffixIcon(item.url);
                item.type = 5;
                item.title = item.name;
            }
            // 电商素材
            if (item.type == 6) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title;
            }
            item.is_local = true;
            result.push(item);
        });
    }
    return result;
};
// 转换选中信息
const changeType = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        if (data[0].type == 10) {
            //公众号图文
            data[0].article_detail.slice(0, 8).forEach((item: any) => {
                result.push({
                    type: 10,
                    // cur_icon: "/static/file/official.png",
                    cur_icon: getArticleTypeName(2, item),
                    name: getArticleTypeName(1, item) || item.title,
                    id: item.id
                });
            });
        } else {
            data.forEach((item: any) => {
                // 图片
                if (item.type == 1) {
                    item.cur_icon = '/static/file/pic.png';
                    item.name = item.file_name;
                    item.type = 1;
                }
                // 抽奖
                if (item.type == 6) {
                    item.cur_icon = '/static/file/wbgg.png';
                    item.name = item.activity_name;
                    item.type = 6;
                }
                ///视频
                if (item.type == 2) {
                    item.cur_icon = '/static/file/mov.png';
                    item.name = item.file_name;
                    item.type = 2;
                }
                // 音频
                if (item.type == 4) {
                    item.cur_icon = '/static/file/mp3.png';
                    item.name = item.file_name;
                    item.type = 4;
                }
                // 链接
                // if (item.type == 6 || item.type == 7) {
                if (item.type == 3) {
                    item.cur_icon = '/static/file/link.png';
                    item.name = item.title;
                    item.type = 3;
                }
                // 电商素材--电商产品
                if (item.type == 7) {
                    item.cur_icon = '/static/file/shop.png';
                    item.name = item.product_name;
                }
                // 收集表
                if (item.type == 9) {
                    item.cur_icon = '/static/file/form.png';
                    item.name = item.title;
                }
                // 电商素材--页面素材
                if (item.type == 8) {
                    item.cur_icon = '/static/file/shop.png';
                    item.name = item.page_name;
                }
                // 文件
                if (item.type == 5) {
                    item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url);
                    item.name = item.mediaFileInfo?.name;
                    item.type = 5;
                }
                // 小程序
                if (item.type == 11) {
                    item.cur_icon = '/static/file/miniApp.png';
                    item.name = item.title;
                }
                result.push(item);
            });
        }
    }
    return result;
};
/**
 * 1-图文 2-文字 3-视频 4-音频 5-图片
 * @param {*} type 1-name 2-imgUrl
 * @param {*} articleType
 */
const getArticleTypeName = (type: number, item: any) => {
    const { type: articleType, cover } = item;
    const list = [
        { name: '', code: 1, iconUrl: cover || '/static/file/official.png' },
        { name: '', code: 2, iconUrl: '/static/file/text.png' },
        { name: '视频', code: 3, iconUrl: '/static/file/mov.png' },
        { name: '音频', code: 4, iconUrl: '/static/file/mp3.png' },
        { name: '图片', code: 5, iconUrl: '/static/file/pic.png' }
    ];
    const info: any = list.find(el => el.code == articleType) || {};
    if (type == 1) {
        return info.name;
    } else if (type == 2) {
        return info.iconUrl;
    }
};
// 删除上传的文件
const remove = (data: any) => {
    if (data.code) {
        formData.value.fileList = formData.value.fileList.filter((item: any) => item.code != data.code);
    } else {
        formData.value.fileList = formData.value.fileList.filter((item: any) => item.id != data.id);
    }
};
// 弹框
const appDialog = reactive({
    visible: false,
    title: '添加推送规则',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
// watch(
//   () => formData.welcome_info.welcome_material,
//   (val) => {
//     if(val.length>0){
//       materialContentData.value = initMaterialData(val)
//     }
//   }
// )
const getLook = (val: any) => {
    Object.assign(formData.value, JSON.parse(JSON.stringify(val)));
    reKey.value = val.id;
    // materialContentData.value = initMaterialData(val.welcome_info.welcome_material)
    formData.value.welcome_info.welcome_text = val.welcome_info.welcome_text;
};

// const formatMaterialParams3 = (state: any) => {
//     const { content: welcome_text, material } = state;
//     let welcome_info = {};
//     let welcome_material: any[] = [];
//     let welcome_local_upload: any[] = [];
//     let welcome_local_link: any[] = [];
//     if (material.length) {
//         material.forEach((item: any) => {
//             const { type, id: media_content_id, local: local = false, code: code = '' } = item;
//             if (local) {
//                 switch (Number(type)) {
//                     case 3:
//                         const { link_title, link_url, link_decs, link_share_image } = item;
//                         welcome_local_link.push({ link_title, link_url, link_decs, link_share_image });
//                         break;
//                     default:
//                         welcome_local_upload.push({ type, code });
//                         break;
//                 }
//             } else {
//                 welcome_material.push({ type, media_content_id });
//             }
//         });
//     }
//     welcome_info = { welcome_text, welcome_material, welcome_local_upload, welcome_local_link };
//     return { welcome_info };
// };

watch(
    () => materialContentData.value,
    val => {
        // if(materialContentData.value.length){
        //   const state = {material: materialContentData.value, content: formData.value.welcome_info.welcome_text}
        //   const res = formatMaterialParams3(state)
        //   formData.value.welcome_info = res.welcome_info
        // }
    },
    { immediate: true, deep: true }
);

// onMounted(() => {

// })

defineExpose({
    appDialog,
    formData,
    materialContentData,
    getLook
});
</script>
<style lang="scss" scoped>
.content_detail {
    padding: 20px;
    box-sizing: border-box;
    display: flex;

    .content_left {
        flex: 1;
        padding-right: 48px;
        border-right: 1px solid #eee;

        .list_item {
            padding-bottom: 24px;
        }
    }

    .content-right {
        padding: 0 24px 0 48px;

        .title {
            text-align: center;
            line-height: 3.5;
            font-size: 14px;
            color: #333;
        }
    }
}

.sop_config {
    // display: flex;
}

.form_sop {
    .el-form-item {
        width: 805px;
    }

    .mar0_form_item {
        margin-bottom: 0;

        .tips {
            .tips-title {
                font-size: 14px;
                font-weight: 500;
                color: #5c95e5;
            }

            .tips-text {
                color: #5c95e5;
                cursor: pointer;
                text-decoration: underline;
            }

            font-size: 12px;
            line-height: 22px;
            padding: 10px;
            background-color: #eff7ff;
        }
    }

    .time_rule_radio {
        border-radius: 4px;
        border: 1px solid #eaeaea;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    .radio_item {
        display: block;

        // margin-bottom: 15px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    :deep(.cust_message_min) {
        width: 180px;
        margin: 0 10px;

        input {
            padding: 0 0 0 15px !important;
        }

        .selectTimes {
            width: 80px;
        }
    }

    .cust_message_min2 {
        width: 70px;
        margin: 0 10px;
    }

    .time_pick {
        width: 110px;
    }

    .cust_message {
        width: 100px;
    }

    .cust_message_time {
        width: 100px;
    }

    .execute_select {
        margin-left: 10px;
    }
}

.mt10 {
    margin-top: 10px;
}

.item_con {
    .radio_group {
        margin-right: 15px;
    }

    .cus_type_0 {
        margin-top: 20px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;

        span {
            color: #ff6b00;
        }
    }

    .form_cus_type {
        margin-top: 5px;

        .el-form-item__content {
            .form_item_input {
                .el-input__inner {
                    width: 253px !important;
                }
            }
        }
    }

    .input_textarea {
        width: 100%;

        :deep .el-textarea__inner {
            height: 170px;
            background: #f8f8f8;
            border: 0;
            box-shadow: none;
            border-bottom: 1px solid #eaeaea;
            padding: 5px 0;
        }
    }
}

.item_message_box {
    background: #f8f8f8;
    border: 1px solid #eaeaea;
    border-radius: 4px;

    // height: 380px;
    position: relative;

    .simple_fn {
        margin-top: 5px;
        display: flex;
        align-items: center;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        padding-bottom: 6px;
        border-bottom: 1px solid #eaeaea;

        div {
            margin: 0 8px;
        }

        .cus_name {
            margin-right: 18px;
            color: #ff6b00;
            cursor: pointer;
        }

        .emoj {
            margin-left: 5px;
            cursor: pointer;
        }

        .sele_text {
            color: #ff6b00;
            cursor: pointer;
        }
    }

    .upload_list_box {
        overflow: hidden;
        height: 140px;
    }

    .upload_height {
        margin-top: 10px;
        height: 180px;
    }

    .upload_list {
        .upload_item {
            margin-top: 5px;
            width: 440px;
            height: 32px;
            box-sizing: border-box;
            background: #eaeaea;
            display: flex;
            padding: 0 10px 0 14px;
            align-items: center;

            .file_icon {
                width: 20px;
                height: 20px;
                margin-right: 7px;
            }

            .file_name {
                width: 375px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .del_icon {
                width: 10px;
                height: 10px;
                cursor: pointer;
            }
        }
    }

    .upload_btn {
        margin-top: 8px;
        width: 430px;
        height: 32px;
        background: #f8f8f8;
        border: 1px solid #d9d9d9;
        padding: 0 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #969696;

        .upload_text {
            margin-left: 8px;
        }
    }

    .upload_pop {
        position: absolute;
        bottom: 50px;
        left: -20px;
        width: 420px;
        height: 84px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 4px 0 rgb(216 216 216 / 50%);
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item_pop {
            width: 60px;
            height: 62px;
            background: #fff;
            border-radius: 6px;
            border: 1px solid #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;

            .item_pop_icon {
                width: 40px;
            }

            .item_pop_name {
                font-size: 14px;
                margin-top: 2px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #1a1918;
            }
        }

        &::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translate(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #fff;
        }
    }

    .emoj_box {
        width: 270px;
        position: absolute;
        top: -40px;
    }
}

.pad12 {
    padding: 12px;
}

.pop_select_box {
    height: 84px;

    .upload_btn {
        margin-top: 8px;
    }

    .upload_pop {
        background: #fff;
        border-radius: 12px;

        // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item_pop {
            width: 60px;
            height: 62px;
            display: flex;
            border-radius: 6px;
            border: 1px solid #f9f9f9;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;

            .item_pop_icon {
                width: 38px;
            }

            .item_pop_name {
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #1a1918;
                white-space: nowrap;
            }
        }
    }
}

.prev_box {
    flex: 1;
    margin-top: 140px;

    .phone_con {
        position: relative;
        margin: 100px auto;
        width: 244px;
        height: 495px;
        box-sizing: border-box;
        border-radius: 36px;
        border: 9px solid #eef5fe;
        background: url('@/assets/image/channel/phone_bg.png');
        background-size: cover;

        .phone-title {
            position: absolute;
            top: -40px;
            left: 75px;
        }

        .phone_List {
            width: 100%;
            box-sizing: border-box;
            position: absolute;
            top: 48px;
            height: 380px;
            bottom: 48px;
            padding: 7px 10px;
        }
    }
}

:deep(.header_tach) {
    width: 100% !important;
}

.text_box {
    margin-left: 80px;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
    color: #33302d;
    padding: 16px;
    background: #fffaf9;
    border-radius: 4px;

    .box_tips {
        color: #ff6b00;
        cursor: pointer;
    }

    h3 {
        color: #ff6b00;
    }
}

.qr_code_box {
    width: 100%;
    text-align: center;

    .qr_title {
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #33302d;
        line-height: 20px;
    }

    .qr_img {
        // width: 155px;
        // height: 155px;
        margin-top: 16px;
    }

    .service {
        font-size: 12px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #969696;
        line-height: 17px;
        margin-top: 4px;
        padding-bottom: 40px;
    }
}

.go_auto {
    font-size: 14px;
    cursor: pointer;
    color: #ff6b00;
}

// :deep(.el-radio.radio_item){
//   margin-top: 10px;
// }
// :deep(.el-radio.is-checked.radio_item){
//   margin: 0;
// }
</style>
